<template>
  <div class="box">
    <header class="header">
      <div class="left"><span @click="$router.go(-1)" class="iconfont icon-zuo"></span></div>
      <div class="center">新增收货地址</div>
      <div class="right"></div>
    </header>
    <div class="address-box">
      <div class="address-form">
        <div class="form-info">
          <label>收货人:</label>
          <div class="form-info-input"><input type="text" placeholder="请填写真实姓名，避免无法配送" v-model="addressList.name"/></div>
        </div>
        <div class="form-info">
          <label>手机号码:</label>
          <div class="form-info-input"><input type="text" placeholder="收货人手机号码" v-model="addressList.tel"/></div>
        </div>
        <div class="form-info">
          <label>所在地区:</label>
          <div class="form-info-input"><p :class="hasAddress ? '' : 'city'" @click="chooseAddress" v-text="cityAddress"></p></div>
          <div class="icons"><span class="iconfont icon-unif067"></span></div>
        </div>
        <div class="form-info">
          <label>详细地址:</label>
          <div class="form-info-input"><input type="text" placeholder="收货人详细地址" v-model="addressList.addressDetail"/></div>
        </div>
        <div class="form-info">
          <label class="default">
            <span :class="flag ? 'active' : ''"></span>
            <input type="checkbox" :checked="isChecked" @change="checkboxChange" />
            <s>设为默认地址</s>
          </label>
        </div>
      </div>
      <div class="save-use"><button @click="save">保存并使用</button></div>
    </div>
    <van-area v-if="addressChoose" :area-list="areaList" title="配送至" @cancel="cancel" @confirm="confirm" />
  </div>
</template>

<script>
import areaList from '@/utils/area'
import { addAddress } from '@/api'
import Vue from 'vue'
import { Area, Toast } from 'vant'
Vue.use(Area)
Vue.use(Toast)
export default {
  data () {
    return {
      flag: false,
      isChecked: '',
      areaList,
      addressChoose: false,
      cityAddress: '收货人所在省市区／县',
      hasAddress: false,
      addressList: {
        userid: '',
        isDefault: 0, // 0为地址 1 为默认地址
        name: '', // 收货人姓名
        tel: '', // 收货人手机号
        province: '', // 省份
        city: '', // 城市
        country: '', // 区县
        addressDetail: '' // 详细地址
      }
    }
  },
  methods: {
    checkboxChange () {
      this.flag = !this.flag
      if (this.flag) {
        this.isChecked = 'checked'
      } else {
        this.isChecked = ''
      }
    },
    cancel () {
      this.addressChoose = false
    },
    confirm (val) {
      // console.log(val)
      this.addressChoose = false
      this.hasAddress = true
      let str = ''
      val.map((item, index) => {
        if (str !== item.name) {
          str += item.name + ' '
        }
        if (index === 0) {
          this.addressList.province = item.name
        } else if (index === 1) {
          this.addressList.city = item.name
        } else if (index === 2) {
          this.addressList.country = item.name
        }
      })
      if (str) {
        this.cityAddress = str
      }
    },
    chooseAddress () {
      this.addressChoose = true
    },
    save () {
      this.addressList.isDefault = this.flag ? 1 : 0
      // console.log(this.addressList)
      if (!this.addressList.name || !this.addressList.tel || !this.addressList.province || !this.addressList.city || !this.addressList.country || !this.addressList.addressDetail) {
        Toast('请填写完整的信息')
      } else {
        addAddress({
          userid: localStorage.getItem('userid'),
          isDefault: this.addressList.isDefault,
          name: this.addressList.name,
          tel: this.addressList.tel,
          province: this.addressList.province,
          city: this.addressList.city,
          country: this.addressList.country,
          addressDetail: this.addressList.addressDetail
        }).then((res) => {
          console.log(res)
          this.$router.go(-1)
        })
      }
    }
  }
}
</script>

<style lang="scss">
@import '@/lib/reset.scss';
.box {
  .header {
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    padding: {
      left: 15px;
      right: 15px;
    }
  }
  .address-box {
    .address-form {
      .form-info {
        padding: {
          left: 15px;
          right: 15px;
        }
        border-top: 1px solid #f7f9fa;
        height: 50px;
        display: flex;
        align-items: center;
        font-size: 15px;
        label {
          flex: 2;
          color: #000;
          &.default {
            font-size: 13px;
            color: #ff734c;
            position: relative;
            display: flex;
            align-items: center;
            span {
              display: inline-block;
              width: 14px;
              height: 14px;
              border-radius: 50%;
              border: 1px solid #ff734c;
              &.active {
                background-color: #ff734c;
              }
            }
            input {
              display: inline-block;
              width: 14px;
              height: 14px;
              position: absolute;
              opacity: 0;
            }
            s {
              margin-left: 10px;
            }
          }
        }
        .form-info-input {
          margin-left: 10px;
          flex: 7;
          input {
            width: 100%;
            border: 0;
            outline: 0;
            // color: #000;
            // font-weight: 700;
          }
          .city {
            color: #757575;
          }
        }
        .icons {
          span {
            font-size: 10px;
          }
        }
      }
    }
    .save-use {
      text-align: center;
      button {
        border: 0;
        outline: 0;
        background-color: #ff734c;
        box-shadow: 0 4px 8px 0 #ffb6a2;
        width: 80%;
        height: 46px;
        border-radius: 23px;
        color: #fff;
        font-size: 16px;
      }
    }
  }
}
</style>
